<template>
  <div class="custom-wrap-container">
    <div class="custom-wrap-header">
      <div id="headLeftInterlayerThird"></div>
      <div class="header-left-piece-third">
        <!--<p class="custom-wrap-title custom-title-nar">各学校办学类型数量统计：</p>-->
        <div class="titleSc1"></div>
        <div class="textSc1">各学校办学类型数量统计</div>
        <div class="xxzs">
          <div class="xxzsTitle"></div>
          <div class="xxzsText">学校总数</div>
          <div class="xxzsData" id="xxzsData">123456人</div>
        </div>
        <div id="schoolTypeEchart" style="width:100%;height:100%;"></div>
      </div>
      <div id="headMiddleInterlayerThird"></div>
      <div class="header-middle-piece-third">
        <!--<p class="custom-wrap-title custom-title-nar">各办学类型在校人数统计：</p>-->
        <div class="titleSc2"></div>
        <div class="textSc2">各办学类型在校人数统计</div>
        <div class="zxrs">
          <div class="zxrsTitle"></div>
          <div class="zxrsText">在校人数</div>
          <div class="zxrsData" id="zxrsData">123456人</div>
        </div>
        <div id="onSchoolNumbEchart" style="width:100%;height:100%;"></div>
      </div>
      <div id="headRightInterlayerThird"></div>
      <div class="header-right-piece-third">
        <!--<p class="custom-wrap-title custom-title-nar">校园周边安全安保人数：</p>-->
        <div class="titleSc3"></div>
        <div class="textSc3">校园周边安全安保人数</div>
        <div class="abrs">
          <div class="abrsTitle"></div>
          <div class="abrsText">安保人数</div>
          <div class="abrsData" id="abrsData">123456人</div>
        </div>
        <div id="schoolSecurityEchart" style="width:100%;height:100%;"></div>
      </div>
    </div>
    <div class="custom-wrap-main">
      <div id="mainLeftInterlayerHalf"></div>
      <div class="main-left-piece-half">
        <!--<p class="custom-wrap-title custom-title-ll">各规模学校办学类型学校数量统计：</p>-->
        <div class="titleSc4"></div>
        <div class="textSc4">各规模学校办学类型学校数量统计</div>
        <div id="schoolScaleEchart" style="width:100%;height:100%;"></div>
      </div>
      <div id="mainRightInterlayerHalf"></div>
      <div class="main-right-piece-half">
        <!--<p class="custom-wrap-title custom-title-ll">各月涉及师生案件数量与侦破数量统计：</p>-->
        <div class="titleSc5"></div>
        <div class="textSc5">各月涉及师生案件数量与侦破数量统计</div>
        <div id="caseNumberEchart" style="width:100%;height:100%;"></div>
      </div>
    </div>
    <div class="custom-wrap-footer bottom">
      <div id="footLeftInterlayerHalf"></div>
      <div class="footer-left-piece-half">
        <!--<p class="custom-wrap-title custom-title-sl">新闻资讯：</p>-->
        <div class="titleSc6"></div>
        <div class="textSc6">新闻资讯</div>
        <div class="xwzx">
          <ul>
            <!--<li class="custom-Trends-list" style="height: 46px; line-height: 49px;padding-bottom: 2px;">新闻资讯</li>-->
            <!--<li class="custom-Trends-list" style="height: 46px; line-height: 49px;padding-bottom: 2px;">新闻资讯</li>-->
            <!--<li class="custom-Trends-list" style="height: 46px; line-height: 49px;padding-bottom: 2px;">新闻资讯</li>-->
            <!--<li class="custom-Trends-list" style="height: 46px; line-height: 49px;padding-bottom: 2px;">新闻资讯</li>-->
            <li><span>新闻资讯</span><span class="scD">2018-04-14</span></li>
            <li><span>新闻资讯</span><span class="scD">2018-04-14</span></li>
            <li><span>新闻资讯</span><span class="scD">2018-04-14</span></li>
            <li><span>新闻资讯</span><span class="scD">2018-04-14</span></li>
          </ul>
        </div>
      </div>
      <div id="footRightInterlayerHalf"></div>
      <div class="footer-right-piece-half">
        <!--<p class="custom-wrap-title custom-title-sl">通知公告：</p>-->
        <div class="titleSc7"></div>
        <div class="textSc7">通知公告</div>
        <div class="scTzgg">
          <ul>
            <!--<li class="custom-Trends-list" style="height: 46px; line-height: 49px;padding-bottom: 2px;">新闻资讯</li>-->
            <!--<li class="custom-Trends-list" style="height: 46px; line-height: 49px;padding-bottom: 2px;">新闻资讯</li>-->
            <!--<li class="custom-Trends-list" style="height: 46px; line-height: 49px;padding-bottom: 2px;">新闻资讯</li>-->
            <!--<li class="custom-Trends-list" style="height: 46px; line-height: 49px;padding-bottom: 2px;">新闻资讯</li>-->
            <li><span>通知公告</span><span class="scD">2018-04-14</span></li>
            <li><span>通知公告</span><span class="scD">2018-04-14</span></li>
            <li><span>通知公告</span><span class="scD">2018-04-14</span></li>
            <li><span>通知公告</span><span class="scD">2018-04-14</span></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      textStyle: {color: 'white'},
      echarts: null
    }
  },
  mounted () {
    this.loadSchoolTypeEchart()
  },
  methods: {
    loadSchoolTypeEchart () {
      let m = this
      let schoolTypeEchart = this.$echarts.init(document.getElementById('schoolTypeEchart'))
      schoolTypeEchart.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter: '{b0}: {c0}所'
        },
        grid: {
          top: '1%',
          left: '1%',
          right: '3%',
          bottom: '27%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          boundaryGap: [0, 0.01],
          axisLabel: m.textStyle,
          axisLine: {
            lineStyle: {
              color: '#ccc'
            }
          }
        },
        yAxis: {
          type: 'category',
          splitLine: { show: true },
          axisLabel: m.textStyle,
          axisTick: {
            alignWithLabel: true
          },
          axisLine: {
            lineStyle: {
              color: '#ccc'
            }
          },
          data: ['幼儿园', '小学', '普通初中', '中等职业学校', '普通高等学校', '大学']
        },
        series: [
          {
            type: 'bar',
            itemStyle: {
              normal: {
                color: function (params) {
                  let colorList = ['#e0c632', '#f06128', '#3eb177', '#1f4eff', '#0487ed', '#ec635d']
                  return colorList[params.dataIndex]
                }
              }
            },
            data: [30, 11, 10, 9, 6, 2]
          }
        ]
      })
      this.loadOnSchoolNumbEchart()
    },
    loadOnSchoolNumbEchart () {
      let onSchoolNumbEchart = this.$echarts.init(document.getElementById('onSchoolNumbEchart'))
      let color = new this.$echarts.graphic.LinearGradient(
        0, 0, 0, 1,
        [
          {offset: 0, color: '#0996e5'},
          {offset: 0.5, color: '#3656df'},
          {offset: 1, color: '#6616db'}
        ]
      )
      onSchoolNumbEchart.setOption({
        color: ['#3398DB'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter: '{b0}：{c0} 千人'
        },
        grid: {
          top: '2%',
          left: '2%',
          right: '2%',
          bottom: '25%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: ['大学', '普通高等学校', '中等职业学校', '普通初中', '小学', '幼儿园'],
            axisTick: {
              alignWithLabel: true
            },
            axisLine: {
              lineStyle: {
                color: '#ccc'
              }
            },
            axisLabel: {
              // formatter: '{value} K',
              color: 'white',
              interval: 0,
              rotate: 15
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '人数',
            nameTextStyle: { color: 'white' },
            splitLine: {
              lineStyle: {
                type: 'dashed'
              },
              show: true
            },
            axisLine: {
              lineStyle: {
                color: '#ccc'
              }
            },
            axisLabel: {
              formatter: '{value} K',
              color: 'white'
            }
          }
        ],
        series: [
          {
            name: '人数',
            type: 'bar',
            barWidth: '50%',
            itemStyle: {
              normal: {
                color: color
              }
            },
            data: [4.3, 4.6, 3.7, 4.1, 2.5, 0.7]
          }
        ]
      })
      this.loadSchoolSecurityEchart()
    },
    loadSchoolSecurityEchart () {
      let schoolSecurityEchart = this.$echarts.init(document.getElementById('schoolSecurityEchart'))
      schoolSecurityEchart.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter: '{b0}</br>{a0}：{c0} 人</br>{a1}：{c1} 人'
        },
        legend: {
          x: 'right',
          textStyle: {color: 'white'},
          data: ['男', '女'],
          padding: [0, 40, 0, 0]
        },
        grid: {
          top: '10%',
          left: '1%',
          right: '1%',
          bottom: '27%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          axisLabel: {
            color: 'white'
          },
          data: ['20-30岁', '30-40岁', '40-50岁', '50-60岁', '60以上']
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            color: 'white'
          },
          boundaryGap: [0, 0.01]
        },
        series: [
          {
            name: '男',
            type: 'bar',
            data: [490, 740, 700, 100, 230],
            color: '#6beefc'
          },
          {
            name: '女',
            type: 'bar',
            data: [250, 260, 250, 260, 270],
            color: '#ed625d'
          }
        ]
      })
      this.loadSchoolScaleEchart()
    },
    loadSchoolScaleEchart () {
      let schoolScaleEchart = this.$echarts.init(document.getElementById('schoolScaleEchart'))
      schoolScaleEchart.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          x: 'right',
          top: 18,
          padding: [0, 40, 0, 0],
          textStyle: {color: 'white'},
          data: ['100人以下', '101-300人', '301-500人', '501-1000人', '1000人以上']
        },
        grid: {
          top: '15%',
          left: '1%',
          right: '1%',
          bottom: '15%',
          containLabel: true
        },
        yAxis: {
          axisLabel: {
            color: 'white'
          },
          type: 'value'
        },
        xAxis: {
          type: 'category',
          axisLabel: {
            color: 'white'
          },
          data: ['大学', '普通高等学校', '中等职业学校', '普通初中', '小学', '幼儿园']
        },
        series: [
          {
            name: '100人以下',
            type: 'bar',
            barWidth: 40,
            stack: '总量',
            // label: {
            //   normal: {
            //     show: true,
            //     position: 'insideRight'
            //   }
            // },
            data: [320, 302, 301, 334, 390, 330],
            color: '#387cfa'
          },
          {
            name: '101-300人',
            type: 'bar',
            stack: '总量',
            // label: {
            //   normal: {
            //     show: true,
            //     position: 'insideRight'
            //   }
            // },
            data: [120, 132, 101, 134, 90, 230],
            color: '#00cca3'
          },
          {
            name: '301-500人',
            type: 'bar',
            stack: '总量',
            // label: {
            //   normal: {
            //     show: true,
            //     position: 'insideRight'
            //   }
            // },
            data: [220, 182, 191, 234, 290, 330],
            color: '#ed625d'
          },
          {
            name: '501-1000人',
            type: 'bar',
            stack: '总量',
            // label: {
            //   normal: {
            //     show: true,
            //     position: 'insideRight'
            //   }
            // },
            data: [150, 212, 201, 154, 190, 330],
            color: '#6beefc'
          },
          {
            name: '1000人以上',
            type: 'bar',
            stack: '总量',
            // label: {
            //   normal: {
            //     show: true,
            //     position: 'insideRight'
            //   }
            // },
            data: [820, 832, 901, 934, 1290, 1330],
            color: '#ddb600'
          }
        ]
      })
      this.loadCaseNumberEchart()
    },
    loadCaseNumberEchart () {
      let caseNumberEchart = this.$echarts.init(document.getElementById('caseNumberEchart'))
      caseNumberEchart.setOption({
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          x: 'right',
          top: 10,
          padding: [0, 50, 0, 0],
          textStyle: {color: 'white'},
          data: ['案件数量', '侦破数量']
        },
        grid: {
          top: '15%',
          left: '1%',
          right: '3%',
          bottom: '15%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          axisLabel: {
            color: 'white'
          },
          data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
        },
        yAxis: {
          type: 'value',
          nameTextStyle: {color: 'white'},
          name: '数量',
          axisLabel: {
            color: 'white'
          }
        },
        series: [
          {
            name: '案件数量',
            type: 'line',
            data: [11, 11, 15, 13, 12, 13, 10, 17, 16, 15, 12, 13],
            symbolSize: 16,
            markPoint: {
              data: [
                {type: 'max', name: '最大值'},
                {type: 'min', name: '最小值'}
              ]
            },
            lineStyle: {
              normal: {color: '#fde51e'}
            }
          },
          {
            name: '侦破数量',
            type: 'line',
            symbolSize: 16,
            data: [6, 10, 7, 9, 8, 12, 9, 5, 14, 12, 10, 11, 9],
            markPoint: {
              data: [
                {name: '年最低', value: -2, xAxis: 1, yAxis: -1.5}
              ]
            },
            lineStyle: {
              normal: {color: '#f76531'}
            }
          }
        ]
      })
    }
  }
}
</script>

<style scoped>
.bottom{
  margin-bottom: 30px;
}
  .titleSc1{
    width: 100%;
    height: 20px;
    background-image: url('~@/assets/bigdata/img/sc1.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin-top: 20px;
  }
  .textSc1{
    color: white;
    position: absolute;
    top: 8px;
    left: 5%;
  }
  .titleSc2{
    width: 100%;
    height: 20px;
    background-image: url('~@/assets/bigdata/img/sc2.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin-top: 20px;
  }
  .textSc2{
    color: white;
    position: absolute;
    top: 8px;
    left: 5%;
  }
  .titleSc3{
    width: 100%;
    height: 20px;
    background-image: url('~@/assets/bigdata/img/sc3.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin-top: 20px;
  }
.textSc3{
  color: white;
  position: absolute;
  top: 8px;
  left: 5%;
}
  .titleSc4{
    width: 100%;
    height: 20px;
    background-image: url('~@/assets/bigdata/img/sc4.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin-top: 20px;
  }
.textSc4{
  color: white;
  position: absolute;
  top: 8px;
  left: 4%;
}
  .titleSc5{
    width: 100%;
    height: 20px;
    background-image: url('~@/assets/bigdata/img/sc5.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin-top: 20px;
  }
.textSc5{
  color: white;
  position: absolute;
  top: 8px;
  left: 3%;
}
  .titleSc6{
    width: 100%;
    height: 20px;
    background-image: url('~@/assets/bigdata/img/sc6.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin-top: 20px;
  }
  .textSc6{
    color: white;
    position: absolute;
    top: 8px;
    left: 16%;
  }
  .titleSc7{
    width: 100%;
    height: 20px;
    background-image: url('~@/assets/bigdata/img/sc7.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin-top: 20px;
  }
  .textSc7{
    color: white;
    position: absolute;
    top: 8px;
    left: 15%;
  }
  .xxzs,.zxrs,.abrs{
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 1%;
  }
  .xxzsTitle{
    height: 30px;
    width: 145px;
    background-image: url('~@/assets/bigdata/img/sc8.png');
    background-repeat: no-repeat;
    background-size: 100%;
  }
.zxrsTitle{
  height: 30px;
  width: 145px;
  background-image: url('~@/assets/bigdata/img/sc9.png');
  background-repeat: no-repeat;
  background-size: 100%;
}
.abrsTitle{
  height: 30px;
  width: 145px;
  background-image: url('~@/assets/bigdata/img/sc10.png');
  background-repeat: no-repeat;
  background-size: 100%;
}
  .xxzsText{
    font-size: 12px;
    color: white;
    position: absolute;
    top: 15%;
    left: 38%;
  }
.zxrsText{
  font-size: 12px;
  color: white;
  position: absolute;
  top: 13%;
  left: 38%;
}
.abrsText{
  font-size: 12px;
  color: white;
  position: absolute;
  top: 16%;
  left: 38%;
}
  .xxzsData{
    font-size: 12px;
    color: white;
    position: absolute;
    top: 13%;
    left: 49%;
    width: 70px;
    text-align: center;
  }
.zxrsData{
  font-size: 12px;
  color: white;
  position: absolute;
  top: 13%;
  left: 49%;
  width: 70px;
  text-align: center;
}
.abrsData{
  font-size: 12px;
  color: white;
  position: absolute;
  top: 16%;
  left: 49%;
  width: 70px;
  text-align: center;
}
  .xwzx ul li{
    height: 40px;
    line-height: 44px;
    padding-left: 5%;
    padding-right: 5%;
    color: white;
    background-image: url('~@/assets/bigdata/img/listbg.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    font-size: 14px;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
  }
  .scTzgg ul li{
    height: 40px;
    line-height: 44px;
    padding-left: 5%;
    padding-right: 5%;
    color: white;
    background-image: url('~@/assets/bigdata/img/listbg.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    font-size: 14px;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
  }
  .xwzx,.scTzgg{
    margin-top: 2%
  }
 .scD{
    color: #00ffc6
  }
</style>
